<template>
    <div class="item" v-for="item of musics" :key="item.id" @click="handleClick(item._id)">
        <img :src="item.pic" alt="">
        <p>{{item.title}}</p>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import axios from 'axios'
export default {
   setup(){
    const state =reactive({
        musics:[],
        handleClick(id){
            console.log(id);
            this.$router.push(`/detail?id=${id}`)
        }
    })
    onMounted(()=>{
       axios.get("http://122.112.161.135:4000/api/movie/inTheaters").then(res=>{
           state.musics =res.data.res
       })
    })
    const refsState =toRefs(state);
    return{
        ...refsState
    }
   }
};
</script>

<style  scoped>
.item{
    border: 1px solid #333;
    margin: 20px;
    padding: 20px;
}
.item img{
    width: 150px;
}
</style>